import React, { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import TheImage from '@/components/TheImage';
import TheButton from '@/components/TheButton';
import { Table } from "antd";
import { Decimal } from 'decimal.js';

export default function OrderTable(props) {
  const data = props.tableData // 组件传参
  const navigate = useNavigate()
  const columns = [
    {
      title: '商品头图',
      dataIndex: 'goodsImage',
      key: 'goodsImage',
      render(text) {
        return <TheImage src={[text]} width={80} height={80}></TheImage>
      }
    },
    {
      title: '商品名称',
      dataIndex: 'goodsName',
      key: 'goodsName',
      width: 350
    },
    {
      title: '单价(元)',
      dataIndex: 'orderPrice',
      key: 'orderPrice',
      render(text) {
        return text ? '￥' + Decimal(text).div(Decimal(100)).toNumber().toFixed(2) : '-'
      }
    },
    {
      title: '数量(件)',
      dataIndex: 'orderProductCount',
      key: 'orderProductCount',
      render(text) {
        return 'x' + text
      }
    },
    {
      title: '优惠分摊(元)',
      dataIndex: 'detailDiscountsPrice',
      key: 'detailDiscountsPrice',
      render(text) {
        return text ? '￥' + Decimal(text).div(Decimal(100)).toNumber().toFixed(2) : '￥0.00'
      }
    },
    {
      title: '实付金额(元)',
      dataIndex: 'detailPayPrice',
      key: 'detailPayPrice',
      render(text, record) {
        return record.detailPayPrice ? '￥' + Decimal(text).div(Decimal(100)).toNumber().toFixed(2) : '￥0.00'
      }
    },
    {
      title: '状态',
      dataIndex: 'orderDetailState',
      key: 'orderDetailState',
      render(text) {
        let orderStatus = ''
        switch (text) {
          case '3':
            orderStatus = "待付款"
            break;
          case '4':
            orderStatus = "待发货"
            break;
          case '5':
            orderStatus = "待收货"
            break;
          case '9':
            orderStatus = "交易成功"
            break;
          case '0':
            orderStatus = "交易关闭"
            break;
          default:
            orderStatus = "-"
        }
        return orderStatus
      }
    },
    {
      title: '售后状态',
      dataIndex: 'salesStatus',
      key: 'salesStatus',
      render(text, record) {
        let label = ''
        switch (text) {
          case 1: case 2: case 3: case 5: case 7: case 6:
            label = "售后中"
            break
          case 4: case 9: case 0:
            label = "售后详情"
            break
          default:
            label = '-'
            break
        }
        return label !== "-" ? <TheButton type="link" onClick={() => navigate('/orderManage/afterSaleOrder/detail', { state: { id: record.shopSalesReturnId } })} > {label}</TheButton > : label
      }

    },
    {
      title: '抽佣比例',
      dataIndex: 'commissionRatio',
      key: 'commissionRatio',
      render(text) {
        return text ? Decimal(text).div(Decimal(100)).toNumber().toFixed(2) + '%' : '-'
      }
    },
    {
      title: '商家所得(元)',
      dataIndex: 'detailPracticalStorePrice',
      key: 'detailPracticalStorePrice',
      render(text) {
        return text ? '￥' + Decimal(text).div(Decimal(100)).toNumber().toFixed(2) : '￥0.00'
      }
    },
    {
      title: '平台所得(元)',
      dataIndex: 'detailPracticalCommission',
      key: 'detailPracticalCommission',
      render(text) {
        return text ? '￥' + Decimal(text).div(Decimal(100)).toNumber().toFixed(2) : '￥0.00'
      }
    },
  ]
  const [dataSource, setDataSource] = useState([]) //表格数据
  useEffect(() => {
    getData()
  }, [data])

  // 获取接口数据
  const getData = () => {
    setDataSource(data)
  }

  const toOrderSalesDetail = (id) => {
    navigate('/orderManage/afterSaleOrder/detail', {
      state: {
        id
      }
    })
  }

  return (
    <div className='warp-box'>
      <Table
        style={{ margin: '20px 0' }}
        columns={columns}
        dataSource={dataSource}
        rowKey={'goodsName'}
        pagination={false}
      />
    </div >
  )
}